<template>

  <!-- 导航栏 -->
  <header>
    <el-tabs v-model="route.name" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="药品列表" name="DrugTable"></el-tab-pane>
      <el-tab-pane label="购物车" name="ShoppingTrolley"></el-tab-pane>
      <el-tab-pane label="订单" name="Orders"></el-tab-pane>
    </el-tabs>
  </header>

  <!-- 显示内容 -->
  <RouterView />

</template>

<script setup lang="ts">
import axios from 'axios';
import { RouterLink, RouterView, useRoute, useRouter } from 'vue-router'
import type { TabsPaneContext } from 'element-plus'

const route = useRoute(); // 解构出路由的属性
const router = useRouter(); // 解构出路由的方法

// 导航栏监听器
const handleClick = (tab: TabsPaneContext, event: Event) => {
  const Obj = {
    name: `${tab.props.name}`
  }
  upRoute(Obj);
}

// 更新路由
const upRoute = (Obj: any) => {
  router.push({ name: Obj.name })
    .then(() => {
      console.log("成功")
    }).catch(() => {
      console.log("失败")
    })
}


</script>

<style scoped>
header {
  width: 100%;
}
</style>
